<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <button @click="handleAddAll()">全选|全不选</button>
        <template v-if="Shopping.length==0">
            空空如也
        </template>

        <template v-else>
            <ul v-for="(item,index) in list" :key="item.id">
                <input type="checkbox" v-model="Shopping" :value="item">
                <img :src="list[index].pic" alt="" style="height: 300px; width: 400px;">
                <span>￥{{item.price}}</span>
                <button @click="handleAdd(index)" :disabled="item.limt==item.number">+</button>
                <span>{{item.number}}</span>
                <button @click="handleCut(index)" :disabled="item.number==0">-</button>
                <button @click="handleDelete(index)">删除</button>
            </ul>
            <div>
                总金额是：<span>{{sum()}}</span>
            </div>
        </template>

    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [{
                    name: "商品名称1",
                    id: 1,
                    number: 3,
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F04.imgmini.eastday.com%2Fmobile%2F20180204%2F20180204202253_a6ed3f7f63da5d2db66927d5e1cf0379_1.png&refer=http%3A%2F%2F04.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615355482&t=61d53239ccfd4c90d53e7afeff03e853",
                    limt: 5,
                    price: 10
                }, {
                    name: "商品名称2",
                    id: 2,
                    number: 5,
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F04.imgmini.eastday.com%2Fmobile%2F20180204%2F20180204202253_a6ed3f7f63da5d2db66927d5e1cf0379_1.png&refer=http%3A%2F%2F04.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615355482&t=61d53239ccfd4c90d53e7afeff03e853",
                    limt: 6,
                    price: 15
                }, {
                    name: "商品名称3",
                    id: 3,
                    number: 7,
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F04.imgmini.eastday.com%2Fmobile%2F20180204%2F20180204202253_a6ed3f7f63da5d2db66927d5e1cf0379_1.png&refer=http%3A%2F%2F04.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615355482&t=61d53239ccfd4c90d53e7afeff03e853",
                    limt: 7,
                    price: 20
                }],
                Shopping: [],
                isCreated: true
            },
            methods: {
                handleAdd(index) {
                    this.list[index].number++
                },
                handleCut(index) {
                    this.list[index].number--
                },
                handleDelete(index) {
                    this.Shopping.splice(index, 1)
                },
                sum() {
                    let total = 0
                    for (let i = 0; i < this.Shopping.length; i++) {
                        total = total + this.Shopping[i].price * this.Shopping[i].number
                    }
                    return total
                },
                handleAddAll() {
                    if (this.Shopping.length == 0) {
                        this.Shopping = this.list
                    }
                    else {
                        this.Shopping = []
                    }

                }
            }
        })
    </script>
</body>

</html>